<template>
  <div class="panel right-bottom">
    <div class="warning-container">
      <div class="warning-list" ref="listRef">
        <div class="warning-item" v-for="(item, index) in displayList" :key="index">
          <div class="warning-icon" :class="item.level">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="warning-content">
            <div class="warning-info">
              <span class="warning-title">{{ item.title }}</span>
              <span class="warning-location">{{ item.location }}</span>
              <span class="warning-time">{{ item.time }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { Warning } from '@element-plus/icons-vue'

// 模拟预警数据
const generateWarningData = () => {
  const levels = ['high', 'medium', 'low']
  const crops = ['水稻', '小麦', '玉米', '大豆']
  const pests = ['稻瘟病', '褐斑病', '蚜虫', '螟虫']
  const locations = ['A区', 'B区', 'C区', 'D区']

  const now = new Date()
  const data = []

  for (let i = 0; i < 10; i++) {
    const level = levels[Math.floor(Math.random() * levels.length)]
    const crop = crops[Math.floor(Math.random() * crops.length)]
    const pest = pests[Math.floor(Math.random() * pests.length)]
    const location = locations[Math.floor(Math.random() * locations.length)]

    data.push({
      level,
      title: `${crop}${pest}预警`,
      location: location,
      time: new Date(now.getTime() - i * 3600 * 1000).toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    })
  }

  return data
}

const warningList = ref(generateWarningData())
const currentIndex = ref(0)
const itemsToShow = 5 // 同时显示的预警数量

// 计算当前显示的列表
const displayList = computed(() => {
  const list = [...warningList.value]
  const totalItems = list.length
  const items = []

  for (let i = 0; i < itemsToShow; i++) {
    const index = (currentIndex.value + i) % totalItems
    items.push(list[index])
  }

  return items
})

let timer: number | null = null
let scrollTimer: number | null = null

// 更新预警数据
const updateWarningData = () => {
  const newData = generateWarningData()
  warningList.value = newData
}

// 自动滚动
const autoScroll = () => {
  currentIndex.value = (currentIndex.value + 1) % warningList.value.length
}

onMounted(() => {
  // 每30秒更新一次数据
  timer = window.setInterval(updateWarningData, 30000)
  // 每3秒滚动一次
  scrollTimer = window.setInterval(autoScroll, 3000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
  if (scrollTimer) {
    clearInterval(scrollTimer)
  }
})
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.warning-container {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100%;
}

.warning-list {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.warning-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(51, 255, 208, 0.05);
  border-radius: 5px;
  border: 1px solid rgba(51, 255, 208, 0.1);
  transition: all 0.3s ease;
  min-height: 46px;
  max-height: 46px;
  box-sizing: border-box;
}

.warning-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.warning-icon.high {
  background: rgba(255, 71, 87, 0.2);
  color: #ff4757;
}

.warning-icon.medium {
  background: rgba(255, 165, 2, 0.2);
  color: #ffa502;
}

.warning-icon.low {
  background: rgba(46, 213, 115, 0.2);
  color: #2ed573;
}

.warning-icon .el-icon {
  font-size: 16px;
}

.warning-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.warning-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}

.warning-title {
  color: #33ffd0;
  font-weight: bold;
  flex-shrink: 0;
}

.warning-location {
  color: #ffa502;
  background: rgba(255, 165, 2, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 14px;
  flex-shrink: 0;
}

.warning-time {
  color: rgba(255, 255, 255, 0.5);
  margin-left: auto;
  font-size: 14px;
  flex-shrink: 0;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.warning-item {
  animation: slideIn 0.3s ease forwards;
}
</style>
